<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /*
            伪类（不存在的类，特殊的类）
                - 用来描述一个元素的特殊状态，如第一个子元素，最后一个子元素等
                - 伪类一般用冒号开头

                    :first-child 第一个子元素
                    :last-child 最后一个子元素
                    :nth-child(n) 第n个子元素
                        n表示第n个，n从0到无穷大
                        2n 或 even 表示偶数个位数
                        2n+1 或 odd 表示奇数上的元素

                    :not()
                        - 否定选择器，将符合条件的元素从选择器中移除
        */
        /* ul > li:first-child {
            color: red;
        }

        ul > li:last-child{
            color: green;
        } */

        /* ul > li:nth-child(n){
            color: red;
        }

        ul > li:nth-child(2n){
            color: red;
        }

        ul > li:nth-child(2n+1){
            color: red;
        } */

        /* ul > li:nth-child(even){
            color: red;
        } */

        /*
            :first-child表示第一个子元素，因此如果ul下的第一个子元素是span时，ul > li:first-child是不生效的。
            如果需要找ul下的第一个li，可以根据:first-of-type去，即需要指定按同类型进行查找,比如：
                :first-of-type
                :last-of-type
                :nth-of-type(n)

        */
        /* ul > li:first-child{
            color: orange;
        }

        ul > li:first-of-type{
            color: orange;
        } */

        /*
            将ul下的除了第一个子li元素之外，选中所有其他的li元素
        */
        ul > li:not(:first-of-type){
            color: orange;
        }

    </style>
</head>
<body>
    
    <ul>
        <span>我是span</span>
        <li>第一个</li>
        <li><span>第二个</span></li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ul>

</body>
</html>